<template>
  <div>
    <p class="subtitle-2 text-center">
      Agnostic RTL Alignment
    </p>

    <p class="text-sm-left">
      Left aligned text on viewports sized SM (small) or wider for rtl or ltr.
    </p>
    <p class="text-md-left">
      Left aligned text on viewports sized MD (medium) or wider for rtl or ltr.
    </p>
    <p class="text-lg-right">
      Right aligned text on viewports sized LG (large) or wider for rtl or ltr.
    </p>
    <p class="text-xl-left">
      Left aligned text on viewports sized XL (extra-large) or wider for rtl or ltr.
    </p>

    <p class="subtitle-2 text-center">
      Responsive RTL Alignment
    </p>

    <p class="text-start">
      Left aligned text on ltr and right aligned on rtl.
    </p>
    <p class="text-end">
      Right aligned text on ltr and left aligned on rtl.
    </p>
  </div>
</template>
